<template>
  <span class="rgame-xing">
    <span>
      <img
        v-for="(item, index) in xing"
        :key="index"
        src="../../assets/img/hxing.svg"
        alt=""
      />
    </span>
    <span>
      <img
        v-for="(item, index) in nxing"
        :key="index"
        src="../../assets/img/nxing.svg"
        alt=""
      />
    </span>
  </span>
</template>

<script>
export default {
  props: {
    giScore: {
      type: Number,
    },
  },
  name: "Xing4",
  data() {
    return {
      xing: "",
      nxing: "",
    };
  },
  created() {
    this.getXing();
  },
  methods: {
    getXing() {
      if (this.giScore == 10 || this.giScore >= 9.5) {
        this.xing = 5;
        this.nxing = 0;
      } else if (this.giScore >= 7.5) {
        this.xing = 4;
        this.nxing = 1;
      } else if (this.giScore >= 6) {
        this.xing = 3;
        this.nxing = 2;
      } else if (this.giScore >= 4) {
        this.xing = 2;
        this.nxing = 3;
      } else if (this.giScore >= 2) {
        this.xing = 1;
        this.nxing = 4;
      } else {
        this.xing = 0;
        this.nxing = 5;
      }
    },
  },
};
</script>

<style>
</style>